<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page layout</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style/association.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/course.css') }}">
</head>

<body>
    <div class="ass" onclick="hideSemesterFn()">
        <div class="ass-con">
            <div class="ass-header">
                <div class="ass-left">
                    <div>
                        <span class="ass-logo">logo</span>
                        <span class="ass-school">{{ school }}</span>
                    </div>
                    <div class="ass-center">
                        <p class="ass-pic-c">
                            <img src="{{ url_for('get_avatar', filename=user.avatar) }}" alt="">
                        </p>
                        <div>
                            <p class="ass-hi">Hi, {{ user.name }}</p>
                            <p class="ass-1">welcome to {{ school }}, keep good work</p>
                        </div>
                    </div>
                </div>
                <div class="ass-right">
                    <input class="ass-input" type="text" placeholder="search">
                    <a href="{{ url_for('auth.login') }}">
                        <button class="sign-in-btn">Sign Out</button>
                    </a>
                    
                </div>
            </div>
            <div class="ass-contents">
                <div class="ass-content">
                    <div class="grade-left">
                        <div class="find-teacher-header">
                           <p>
                                <span class="semes" onclick="showSemesterFn(this,event)">
                                    First semester
                                </span>
                                <span class="grade-time-tips">
                                    <span class="icon" title="Previous semester">
                                        <svg class="down left" viewBox="0 0 32 32" width="100%" height="100%"><path d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"></path></svg>
                                    </span>
                                    <span class="text">March 21, 2021—July 1, 2021</span>
                                    <span class="icon" title="Next semester">
                                        <svg class="down right" viewBox="0 0 32 32" width="100%" height="100%"><path d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"></path></svg>
                                    </span>

                                </span>
                            </p>
                            <div class="semester-con">
                                <p onclick="selectSemesterFn(0,event)">
                                    <span>First semester</span>
                                    <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                </p>
                                <p onclick="selectSemesterFn(1,event)">
                                    <span>Second semester</span>
                                    <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                </p>
                                <p onclick="selectSemesterFn(2,event)">
                                    <span>Third semester</span>
                                    <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                </p>
                            </div>
                        </div>
                        <div class="course-top-lists">
                            {% for course in courses %}
                                <a class="grade-right-list grade-purple" href="/course/lesson/{{ course.id }}">
                                    <div>
                                        <span class="grade-right-circle"></span>
                                        <div>
                                            <p class="grade-right-title">
                                                {{ course.name }}
                                            </p>
                                            <p class="grade-right-tip">
                                                {{ course.professor.name }} - {{ course.professor.post }}
                                            </p>
                                            <p>
                                                <span class="grade-right-time">schedule {{ course.progress }}/{{ course.lessons }}</span>
                                            </p>
                                            <p class="grade-right-line">
                                                <span class="grade-right-active"></span>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            {% endfor %}
                        </div>
                        <div class="task">
                            <p class="task-titles">
                                ongoing task
                            </p>
                            <div class="task-lists">
                                <div class="task-list">
                                    <div>
                                        <p class="task-title">
                                            Computer Programming Course work 2
                                        </p>
                                        <p class="task-tip">
                                            deadline：today 7am
                                        </p>
                                    </div>
                                    <p>
                                        <span class="completed ">completed </span>
                                        <span class="task-circle"></span>
                                    </p>
                                </div>
                                <div class="task-list active">
                                    <div>
                                        <p class="task-title">
                                            Interactive design Course work2
                                        </p>
                                        <p class="task-tip">
                                            deadline：today 3pm
                                        </p>
                                    </div>
                                    <p>
                                        <span class="completed ">completed </span>
                                        <span class="task-circle"></span>
                                    </p>
                                </div>
                                <div class="task-list">
                                    <div>
                                        <p class="task-title">
                                            Database System Course work 2
                                        </p>
                                        <p class="task-tip">
                                            tomorrow 9pm
                                        </p>
                                    </div>
                                    <p>
                                        <span class="completed ">completed </span>
                                        <span class="task-circle"></span>
                                    </p>
                                </div>
                                <div class="task-list">
                                    <div>
                                        <p class="task-title">
                                            Risk and Decision Course work2
                                        </p>
                                        <p class="task-tip">
                                            deadline：2021/05/04 7am
                                        </p>
                                    </div>
                                    <p>
                                        <span class="completed ">completed </span>
                                        <span class="task-circle"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grade-right">
                        <div class='calendar' id='calendar'></div>
                        <div class="notification">
                            <p class="notification-title">
                                <span>notification</span>
                                <span class="all">all</span>
                            </p>
                            <div class="community-list">
                                <p class="community-titles">
                                    <span>Class reminder</span>
                                    <span class="community-title-right">
                                        1 hour countdown
                                        <img src="{{ url_for('static', filename='img/007.svg') }}" alt="">
                                    </span>
                                </p>
                                <p class="community-tip">There will be a video lesson from the professor in an hour </p>
                            </div>
                            <div class="community-list">
                                <p class="community-titles">
                                    <span>exam reminder</span>
                                    <span class="community-title-right">
                                        1 hour countdown
                                        <img src="{{ url_for('static', filename='img/007.svg') }}" alt="">
                                    </span>
                                </p>
                                <p class="community-tip">There will be a video lesson from the professor in an hour </p>
                            </div>
                            <div class="community-list">
                                <p class="community-titles">
                                    homework submission reminder
                                </p>
                                <p class="community-tip">There will be a video lesson from the professor in an hour </p>
                            </div>
                            <div class="community-list">
                                <p class="community-titles">
                                    school start
                                </p>
                                <p class="community-tip">
                                    March 21, 2021—July 1, 2021
                                </p>
                            </div>
                            <div class="community-list">
                                <p class="community-titles">
                                    holiday
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ass-side">
                    <ul class="ass-side-list">
                        <li class="active">
                            <a href="{{ url_for('student.course') }}">
                                <span class="ass-icon"></span>
                                my course
                            </a>
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            my task
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            notification
                        </li>
                        <li>
                            <a href="{{ url_for('student.timetable') }}">
                                <span class="ass-icon"></span>
                                timetable
                            </a>
                        </li>
                    </ul>
                    <ul class="ass-side-list">
                        <li>
                            <a href="{{ url_for('student.grade') }}">
                                <span class="ass-icon"></span>
                                grades
                            </a>
                        </li>
                        <li  class="no-open">
                            <span class="ass-icon"></span>
                            homework
                        </li>
                    </ul>
                    <ul class="ass-side-list">
                        <li>
                            <a href="{{ url_for('student.social') }}">
                                <span class="ass-icon"></span>
                                Social
                            </a>
                        </li>
                        <li  class="no-open">
                            <span class="ass-icon"></span>
                            Societies
                        </li>
                    </ul>
                    <div class="ass-workplace">
                        <p>workplace</p>
                        <button>
                            <span>forum</span>
                            <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                                <path
                                    d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                </path>
                            </svg>
                        </button>
                        <button>
                            <span>My upload</span>
                            <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                                <path
                                    d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                </path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script
      src="{{ url_for('static', filename='mobile/js/libs/jquery.min.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script>
        function showSemesterFn(obj, event) {
            stopP(event)
            $(".semester-con").addClass("show");
        }

        function stopP(e) {
            var evt = e || window.event;
            evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true);
        }

        function hideSemesterFn() {
            $(".semester-con").removeClass("show")
        }
        function onSelectLeft() {

        }
        function onSelectRight() {

        }
        function selectSemesterFn(num, event) {
            stopP(event)
            for (var i = -1; i < 2; i++) {
                $(".semester-con p").eq(i).removeClass("active")
            }
            $(".semester-con p").eq(num).addClass("active")
            $(".semes").text($(".semester-con p").eq(num).text())
        }
    </script>
    <script>
        (function () {

            var dateObj = (function () {
                var _date = new Date();
                return {
                    getDate: function () {
                        return _date;
                    },
                    setDate: function (date) {
                        _date = date;
                    }
                };
            })();

            renderHtml();
            showCalendarData();
            bindEvent();

            function renderHtml() {
                var calendar = document.getElementById("calendar");
                var titleBox = document.createElement("div");
                var bodyBox = document.createElement("div");

                titleBox.className = 'calendar-title-box';
                titleBox.innerHTML =
                    "<span class='prev-month' id='prevMonth'>" +
                    "<svg class='down' viewBox='0 0 32 32' width='100%' height='100%'>" +
                    "<path d='M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z'>" +
                    "</path>" +
                    "</svg>" +
                    "</span>" +
                    "<span class='calendar-title' id='calendarTitle'></span>" +
                    "<span id='nextMonth' class='next-month'>" +
                    "<svg class='down' viewBox='0 0 32 32' width='100%' height='100%'>" +
                    "<path d='M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z'>" +
                    "</path>" +
                    "</svg>" +
                    "</span>";
                calendar.appendChild(titleBox);

                bodyBox.className = 'calendar-body-box';
                var _headHtml = "<div class='tr'>" +
                    "<span>Sun</span>" +
                    "<span>Mon</span>" +
                    "<span>Tue</span>" +
                    "<span>Wed</span>" +
                    "<span>Thu</span>" +
                    "<span>Fir</span>" +
                    "<span>Sat</span>" +
                    "</div>";
                var _bodyHtml = "";

                for (var i = 0; i < 5; i++) {
                    _bodyHtml += "<div class='tr tr-day'>" +
                        "<p><span class='td'></span></p>" +
                        "<p><span class='td'></span></p>" +
                        "<p><span class='td'></span></p>" +
                        "<p><span class='td'></span></p>" +
                        "<p><span class='td'></span></p>" +
                        "<p><span class='td'></span></p>" +
                        "<p><span class='td'></span></p>" +
                        "</div>";
                }
                bodyBox.innerHTML = "<div id='calendarTable' class='calendar-table'>" +
                    _headHtml + _bodyHtml +
                    "</div>";
                calendar.appendChild(bodyBox);
            }

            function showCalendarData() {
                var _year = dateObj.getDate().getFullYear();
                var _month = dateObj.getDate().getMonth() + 1;
                var _dateStr = getDateStr(dateObj.getDate());


                var en_mon_arr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Spt", "Oct", "Nov",
                    "Dec"
                ]
                var calendarTitle = document.getElementById("calendarTitle");
                var titleStr = en_mon_arr[_dateStr.substr(4, 2) - 1] + " " + new Date().getDate() + ', ' + _dateStr
                    .substr(0, 4);
                calendarTitle.innerText = titleStr;
                var aa = document.createElement("i");
                var _table = document.getElementById("calendarTable");
                var _tds = _table.getElementsByClassName("td");
                var _firstDay = new Date(_year, _month - 1, 1);
                for (var i = 0; i < _tds.length; i++) {
                    var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay());
                    var _thisDayStr = getDateStr(_thisDay);
                    _tds[i].innerText = _thisDay.getDate();

                    _tds[i].setAttribute('data', _thisDayStr);


                    if (_thisDayStr == getDateStr(new Date())) {
                        _tds[i].appendChild(aa).className = 'currentDay';
                    } else if (_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)) {
                        _tds[i].appendChild(aa).className = 'currentMonth';
                    } else {
                        _tds[i].appendChild(aa).className = 'otherMonth';
                    }

                }

                selectDate();
            }

            function selectDate() {
                var _year = dateObj.getDate().getFullYear();
                var _month = dateObj.getDate().getMonth() + 1;
                var _dateStr = getDateStr(dateObj.getDate());


                var en_mon_arr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Spt", "Oct", "Nov",
                    "Dec"
                ]

                var _table = document.getElementById("calendarTable");
                var _tds = $('.td')
                var _firstDay = new Date(_year, _month - 1, 1);
                for (var i = 0; i < _tds.length; i++) {
                    var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay());
                    var _thisDayStr = getDateStr(_thisDay);

                    if (_thisDayStr == getDateStr(new Date())) {
                        _tds[i].className = 'currentDay';
                    } else if (_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)) {
                        _tds[i].className = 'currentMonth';
                    } else {
                        _tds[i].className = 'otherMonth';
                    }

                }

            }

            function bindEvent() {
                var prevMonth = document.getElementById("prevMonth");
                var nextMonth = document.getElementById("nextMonth");
                addEvent(prevMonth, 'click', toPrevMonth);
                addEvent(nextMonth, 'click', toNextMonth);
            }


            function addEvent(dom, eType, func) {
                if (dom.addEventListener) { // DOM 2.0
                    dom.addEventListener(eType, function (e) {
                        func(e);
                    });
                } else if (dom.attachEvent) { // IE5+
                    dom.attachEvent('on' + eType, function (e) {
                        func(e);
                    });
                } else { // DOM 0
                    dom['on' + eType] = function (e) {
                        func(e);
                    }
                }
            }

            function toPrevMonth() {
                var date = dateObj.getDate();
                dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
                showCalendarData();
            }

            function toNextMonth() {
                var date = dateObj.getDate();
                dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
                showCalendarData();
            }

            function getDateStr(date) {
                var _year = date.getFullYear();
                var _month = date.getMonth() + 1;
                var _d = date.getDate();

                _month = (_month > 9) ? ("" + _month) : ("0" + _month);
                _d = (_d > 9) ? ("" + _d) : ("0" + _d);
                return _year + _month + _d;
            }
        })();
    </script>
</body>

</html>